import React, { useState } from "react";
import { TriangleAlert } from "lucide-react";
import { cn } from "@/lib/utils";
import TooltipWrapper from "@/components/shared/TooltipWrapper/TooltipWrapper";

type DashboardWidgetHeaderProps = {
  title: string;
  subtitle?: string;
  warningMessage?: string;
  actions?: React.ReactElement<{ onOpenChange?: (open: boolean) => void }>;
  dragHandle?: React.ReactNode;
  className?: string;
  preview?: boolean;
};

const DashboardWidgetHeader: React.FunctionComponent<
  DashboardWidgetHeaderProps
> = ({
  title,
  subtitle,
  warningMessage,
  actions,
  dragHandle,
  className,
  preview = false,
}) => {
  const [menuOpen, setMenuOpen] = useState(false);

  const actionsWithHandler =
    actions && !preview
      ? React.cloneElement(actions, { onOpenChange: setMenuOpen })
      : null;

  const showDragHandle = dragHandle && !preview;

  return (
    <div
      className={cn(
        "relative flex flex-col gap-0.5 rounded px-2 pb-0.5",
        showDragHandle ? "pt-1" : "pt-2",
        className,
      )}
    >
      {showDragHandle && (
        <div
          className={cn(
            "flex w-full items-center justify-center pb-0.5 transition-opacity",
            menuOpen ? "opacity-100" : "opacity-0 group-hover:opacity-100",
          )}
        >
          {dragHandle}
        </div>
      )}
      <div className="flex items-start gap-2">
        {warningMessage && (
          <TooltipWrapper content={warningMessage}>
            <TriangleAlert className="mt-0.5 size-3 shrink-0 text-amber-500" />
          </TooltipWrapper>
        )}
        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
          <div className="truncate text-xs font-medium text-foreground">
            {title}
          </div>
          {subtitle && (
            <div className="truncate text-xs font-normal text-muted-slate">
              {subtitle}
            </div>
          )}
        </div>
        {actionsWithHandler && (
          <div
            className={cn(
              "flex shrink-0 items-center gap-2 transition-opacity",
              menuOpen ? "opacity-100" : "opacity-0 group-hover:opacity-100",
            )}
          >
            {actionsWithHandler}
          </div>
        )}
      </div>
    </div>
  );
};

export default DashboardWidgetHeader;
